<template>
    <div>
        <div>
            <el-button type="success" size="small" @click="save">保存</el-button>
            <el-button type="warning" size="small"  @click="publish">发布</el-button>
        </div>
        <el-row>
            <el-col :span="24"><div class="container" ref="container"></div></el-col>
        </el-row>
        <el-drawer
            v-model="visible"
            title="设置"
            size="700px"
            direction="rtl"
            @closed="handleClose"
        >
            <userTask v-if="formData.type==='bpmn:userTask'" :model-value="formData" :info="templateInfos" :targetSource="targetSource"></userTask>
            <edge v-if="formData.type==='bpmn:sequenceFlow'" :model-value="formData" :info="templateInfos" :targetSource="targetSource"></edge>

        </el-drawer>
    </div>
</template>

<script setup>
    import LogicFlow from "@logicflow/core";
    import "@logicflow/core/dist/style/index.css";
    import '@logicflow/extension/lib/style/index.css'
    import { DndPanel, SelectionSelect,Menu,Control,BpmnElement } from '@logicflow/extension';
   // import UserTask from "./nodeFlow/UserTask.js";
    import { ContextPad } from "./nodeFlow/contextPad";
    import setContextPad from "./nodeFlow/setContextPad";
    import setDndPanel from "./nodeFlow/setDndPanel";
    import userTask from "./properties/userTask.vue";
    import edge from "./properties/edge.vue";
    import XEUtils, {assign} from 'xe-utils'
    //  以上是logFlow的需要

    import {onMounted, reactive, ref} from "vue"
    import {obj} from "./index.js"
    import {getWorkFlows, publishWorkFlows, saveWorkFlows} from "/@/api/linkoo/workflow";
    import {ElMessage} from "element-plus";
    import {getUserList} from "/@/api/system/user";
    import {getRoleList} from "/@/api/system/role";



    let container = ref(null)
    let lf = ref(null)
    let formData = ref(null)
    let visible = ref(false)
    const state = reactive({
        cate: "",
        flowData:{edges:null,nodes:null}
    })
    const targetSource= ref({user: [], role: [], post: [], manager: [], field: []})
    const props = defineProps({
        templateInfos: Object
    })

    onMounted(async ()=>{
      await  getWorkFlows(props.templateInfos.template.templateCode).then(res=>{
          state.flowData.edges=XEUtils.toStringJSON(res.data.Info.lineContent)
          state.flowData.nodes=XEUtils.toStringJSON(res.data.Info.nodeContent)
        })
        load()
        lf.value = new LogicFlow({
            container:container.value,
            grid:  {
                size: 10,
                visible: false,
                type: "dot",
                config: {
                    color: "#ababab",
                    thickness: 1,
                },
            },
            plugins:[DndPanel,ContextPad,BpmnElement]

        })
        setContextPad(lf.value);
        setDndPanel(lf.value);
        lf.value.render(state.flowData)
        // lf.value.render(objData.value);
        lf.value.on("node:dnd-add", ({ data }) => {
            if(data.text===undefined &&['bpmn:startEvent','bpmn:endEvent'].includes(data.type) )
               lf.value.updateText(data.id,data.properties.title)
                // console.log(data)
        });
        lf.value.on("node:contextmenu,edge:contextmenu", ({data}) => {
            if(data && ['bpmn:sequenceFlow','bpmn:userTask','bpmn:serviceTask'].includes(data.type)){
                visible.value=true;
                formData.value=data
                if (data.type==='bpmn:sequenceFlow'){
                    state.cate="L"
                }else {
                    state.cate='N'
                    targetSource.value.manager=[]
                    const pd=lf.value.getNodeIncomingNode(data.id)
                   XEUtils.arrayEach(pd,item=>{
                       targetSource.value.manager.push({label:item.properties.title,value:item.id})
                   })
                }
                // console.log('所选对象..',data.data.id,data.data.properties)
            }
        });
    })
    const load= ()=> {
        getUserList({currentPage: 1, pageSize: 10000}).then(res => {
                XEUtils.arrayEach(res.data.userList, item => {
                    targetSource.value.user.push({
                        value: item.id,
                        label: item.userName
                    })
                })
            })
        targetSource.value.field=assign({},props.templateInfos.tables)

            getRoleList({currentPage: 1, pageSize: 10000}).then(res => {
                XEUtils.arrayEach(res.data.list, item => {
                    targetSource.value.role.push({
                        value: item.id,
                        label: item.name
                    })
                })
            })
        console.log('数据',targetSource.value)
    };
    const handleClose = ()=> {
        let p={}
        if(state.cate==='L'){
            p=lf.value.getEdgeModelById(formData.value.id)
        }else{
            p=lf.value.getNodeModelById(formData.value.id)
        }
        p.updateText(formData.value.properties.title)
        p.setProperties(formData.value.properties);


    }
    const publish = ()=>{
        publishWorkFlows(props.templateInfos.template.templateCode).then(res=>{
            if (res.code===0){
                ElMessage.success('发布成功');
            }
        })

    }
    const save = ()=>{
        const data=lf.value.getGraphData()
        saveWorkFlows(props.templateInfos.template.templateCode,data).then(res=>{
            if (res.code===0){
                ElMessage.success('保存成功');
            }
        })



    }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 1000px;
  }
</style>